<template>
  <div class="projects">
    <el-container>
      <el-main>
        <el-row :gutter="16" justify="center">
          <el-col :xs="24" :sm="20" :md="18" :lg="16">
            <el-card class="card" shadow="hover">
              <template #header>
                <div class="card-header">
                  <h2 class="section-title">
                    <i class="fas fa-rocket"></i>
                    我的作品
                  </h2>
                </div>
              </template>

              <el-row :gutter="16">
                <el-col v-for="p in projects" :key="p.name" :xs="24" :md="12">
                  <el-card class="subcard" shadow="hover" style="margin-bottom: 16px;">
                    <template #header>
                      <div class="project-title">{{ p.name }}</div>
                    </template>
                    <p class="muted" style="margin: 0 0 8px;">{{ p.description }}</p>
                    <div class="tags" v-if="p.tech?.length">
                      <el-tag v-for="t in p.tech" :key="t" size="small" effect="dark" style="margin-right: 6px; margin-bottom: 6px;">
                        {{ t }}
                      </el-tag>
                    </div>
                    <div class="actions">
                      <el-button v-if="p.repo" tag="a" :href="p.repo" target="_blank" rel="noopener" type="primary" plain round>开源地址</el-button>
                      <el-button v-if="p.demo" tag="a" :href="p.demo" target="_blank" rel="noopener" plain round>在线预览</el-button>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
  
</template>

<script setup lang="ts">
interface ProjectItem {
  name: string;
  description: string;
  tech?: string[];
  repo?: string;
  demo?: string;
}

const projects: ProjectItem[] = [
  {
    name: 'AI Blog (本站点)',
    description: '基于 Vue3 + TypeScript + Vite + Element Plus 的极客风博客，Markdown 渲染与可视化统计。',
    tech: ['Vue 3', 'TypeScript', 'Vite', 'Pinia', 'Element Plus'],
    repo: 'https://github.com/yourname/ai-blog'
  },
  {
    name: 'FastAPI Starter',
    description: '一个现代化 FastAPI 脚手架，内置配置、日志与健康检查。',
    tech: ['Python', 'FastAPI', 'Uvicorn'],
    repo: 'https://github.com/yourname/fastapi-starter'
  },
  {
    name: 'Django 工具集',
    description: '常用中间件与管理命令合集，提升 Django 开发效率。',
    tech: ['Python', 'Django'],
    repo: 'https://github.com/yourname/django-toolkit'
  }
];
</script>

<style scoped>
.projects { max-width: 1440px; margin: 0 auto; padding: 2rem 1rem; }
.section-title {
  font-family: 'Orbitron', monospace;
  font-size: 1.8rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-title i {
  color: var(--primary);
}

.card { 
  background: var(--glass); 
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(15px);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.card-header { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
}

.subcard { 
  background: var(--glass); 
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.subcard:hover {
  background: rgba(37, 99, 235, 0.05);
  border-color: var(--primary);
  transform: translateY(-3px);
}
.muted { color: var(--muted); }
.project-title { font-weight: 700; }
.actions { margin-top: 8px; display: flex; gap: 8px; }
</style>

